<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>地址信息管理</title>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .btn { padding: 5px 12px; margin: 2px; cursor: pointer; }
        .btn-add { background: #4CAF50; color: white; border: none; }
    </style>
</head>
<body>
<h1 style="text-align: center;">地址列表</h1>

<%-- 地址列表展示（含操作按钮） --%>
<table>
    <tr>
        <th>ID</th>
        <th>收件人</th>
        <th>联系方式</th>
        <th>省市区</th>
        <th>详细地址</th>
        <th>默认地址</th>
        <th>操作</th>
    </tr>
    <c:forEach var="address" items="${addressList}">
        <tr>
            <td>${address.id}</td>
            <td>${address.accept}</td>
            <td>${address.telphone}</td>
            <td>${address.province} ${address.city} ${address.area}</td>
            <td>${address.street}</td>
            <td>${address.def == '1' ? '是' : '否'}</td>
            <td>
                    <%-- 编辑按钮（跳转编辑页）[1,8](@ref) --%>
                <a href="<c:url value='/addresses/${address.id}/edit?userId=${userId}'/>" class="btn">✏️ 编辑</a>

                    <%-- 删除按钮（通过fetch删除） --%>
                <button type="button" class="btn" onclick="deleteAddress(${address.id})">🗑️ 删除</button>
            </td>
        </tr>
    </c:forEach>
</table>

<%-- 新增地址按钮（跳转添加页）[3,6](@ref) --%>
<div style="text-align: center; margin-top: 30px;">
    <a href="<c:url value='/addresses?userId=${userId}'/>" class="btn btn-add">＋ 新增地址</a>
</div>

</body>
<script>
    function deleteAddress(addressId) {
        console.log("传递的 addressId: ", addressId);  // 打印出 addressId，确认是否为空

        if (!addressId) {
            alert("无效的地址 ID");
            return;
        }

        const url = `/addresses/`+addressId;
        console.log("请求的 URL:", url);  // 打印最终的 URL

        fetch(url, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
            },
        })
            .then(response => {
                if (response.ok) {
                    console.log('删除成功');
                    location.reload();  // 刷新页面
                } else {
                    console.log('删除失败');
                }
            })
            .catch(error => {
                console.error('请求错误:', error);
            });
    }

</script>
</html>
